<div id="shared-device">
    <div style="padding: 10px;">
        <i-table border :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
    </div>
    <script>
        vueInstanse = new Vue({
            el: '#shared-device',
            data: {
                loading: false,
                columns: [{
                    title: '分组名称',
                    key: 'groupname',
                }, {
                    title: '共享者',
                    key: 'fromcreater',
                }, {
                    title: '被共享者 ',
                    key: 'tocreater',
                }, {
                    title: '操作者 ',
                    key: 'operator',
                }, {
                    title: '共享时间 ',
                    key: 'createtimeStr',
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 130,
                    render: function(h, params) {
                        var row = params.row;
                        return h('Poptip', {
                            props: {
                                confirm: true,
                                title: isZh ? '是否删除该分享?' : 'Delete this share?'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                'on-ok': function() {
                                    vueInstanse.handleDelete(row, params.index);
                                }
                            }
                        }, [
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small',
                                }
                            }, isZh ? '取消共享' : 'Cancel sharing')
                        ]);

                    },
                }],
                tableData: [],
                taleHeight: window.innerHeight - 115,
            },
            methods: {
                querySharedGroups: function() {
                    var me = this;
                    var url = myUrls.querySharedGroups();
                    me.loading = true;
                    utils.sendAjax(url, {}, function(resp) {
                        me.loading = false;
                        if (resp.groups && resp.groups.length) {
                            resp.groups.forEach(function(group) {
                                group.createtimeStr = DateFormat.longToLocalDateTimeStr(group.createtime);
                            })
                        }
                        me.tableData = resp.groups;
                    });
                },
                handleDelete: function(row, index) {
                    var me = this;
                    var url = myUrls.delShareGroup();
                    var data = {
                        groupsharedid: row.groupsharedid
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.$delete(me.tableData, index);
                            me.$Message.success(me.$t('message.deleteSucc'));
                        } else {
                            me.$Message.error(me.$t('message.deleteFail'));
                        }
                    })
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.taleHeight = wHeight - 115;
                },
            },
            mounted: function() {
                var me = this;
                me.querySharedGroups();
                me.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>